<template>
  <div>
    <!-- 隐射二级路由 -->
    <router-view />
    <div style="height: 60px"></div>

    <!-- 底部选项卡 -->
    <mt-tabbar fixed v-model="tabSelected">
      <mt-tab-item id="index">
        <img
          :src="require(`@/assets/index_${tabSelected == 'index' ? 1 : 0}.png`)"
          alt=""
          slot="icon"
        />首页
      </mt-tab-item>
      <mt-tab-item id="me">
        <img
          v-if="tabSelected == 'me'"
          src="@/assets/me_1.png"
          alt=""
          slot="icon"
        />
        <img v-else src="@/assets/me_0.png" alt="" slot="icon" />
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabSelected: this.$route.path.split("/").pop(), //绑定底部选项卡选中项
    };
  },

  watch: {
    tabSelected(to, from) {
      // tabSelected变化时自动执行
      // 判断一下，防止路由重复跳转
      if (this.tabSelected == this.$route.path.split("/").pop()) {
        return; // 重复路由，不需要跳转
      }
      console.log("点击了底部选项卡：" + to);
      if (to == "index") {
        this.$router.push("/home/index");
      } else if (to == "me") {
        this.$router.push("/home/me");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>